বুটস্ট্রাপ ৫-এ Collapsible Navbar এবং ScrollSpy একত্রিত করে আপনি একটি রেসপন্সিভ নেভিগেশন বার তৈরি করতে পারেন, যা বড় স্ক্রীনে ফুল নেভিগেশন শো করবে এবং ছোট স্ক্রীনে একটি কোলোপ্সিবল ( collapsible) মেনু হিসেবে কার্যকরী হবে। ScrollSpy ব্যবহার করে, আপনি পেজ স্ক্রল করার সময় অ্যাকটিভ সেকশনের উপর আলোকপাত করতে পারেন, যা ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করবে।
Collapsible Navbar এমন একটি নেভিগেশন বার, যা ছোট স্ক্রীনে (যেমন মোবাইল ডিভাইসে) স্বয়ংক্রিয়ভাবে একটি মেনু হিসেবে সংকুচিত হয়ে যায় এবং একটি বাটন ক্লিক করলে প্রসারিত হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Navbar Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
navbar-toggler: এটি সেই বাটন, যা ছোট স্ক্রীনে দেখা যাবে। ইউজার যখন এটি ক্লিক করবেন, তখন নেভিগেশন বারটি প্রসারিত হবে।navbar-toggler-icon: এটি একটি আইকন যা টগলারের মধ্যে দেখা যাবে। এটি সাধারণত তিনটি অনুভূমিক লাইন থাকে, যা ব্যবহারকারীর জন্য পরিষ্কারভাবে দেখায় যে এটি একটি মেনু।collapse navbar-collapse: এই ক্লাসটি নেভিগেশন মেনুটি প্রসারিত বা সংকুচিত করার জন্য ব্যবহৃত হয়।ScrollSpy হল একটি বুটস্ট্রাপ ফিচার যা পেজ স্ক্রল করার সময় আপনাকে জানায় কোন সেকশন বর্তমানে ভিউপোর্টে আছে। এটি সাধারণত নেভিগেশন বারের সাথে ইন্টিগ্রেটেড হয়ে ব্যবহার হয়, যেখানে যখন আপনি একটি সেকশনে স্ক্রল করেন, তখন নেভিগেশন বারে সেই সেকশনটির লিঙ্ক হাইলাইট হয়ে যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollSpy Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
section {
height: 100vh;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-offset="0" tabindex="0">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">ScrollSpy Example</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Section 4</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Sections -->
<section id="section1" class="bg-primary text-white">
<div class="container">
<h1>Section 1</h1>
<p>This is section 1.</p>
</div>
</section>
<section id="section2" class="bg-secondary text-white">
<div class="container">
<h1>Section 2</h1>
<p>This is section 2.</p>
</div>
</section>
<section id="section3" class="bg-success text-white">
<div class="container">
<h1>Section 3</h1>
<p>This is section 3.</p>
</div>
</section>
<section id="section4" class="bg-danger text-white">
<div class="container">
<h1>Section 4</h1>
<p>This is section 4.</p>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-spy="scroll": এই অ্যাট্রিবিউটটি বুটস্ট্র্যাপকে নির্দেশ দেয় যে এটি স্ক্রলিংয়ের ওপর নজর রাখবে এবং কার্যকর করবে।data-bs-target="#navbarNav": এটি নির্দেশ করে যে স্ক্রল স্পাইটি কোন এলিমেন্টের ওপর কাজ করবে (এখানে নেভিগেশন বার)।data-bs-offset="0": এটি স্পেসিফাই করে যে স্ক্রল স্পাই কতটা ভিউপোর্টের ভিতরে পৌঁছালে হাইলাইটিং শুরু হবে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
